@astrojs/language-server

What is @astrojs/language-server?

@astrojs/language-server is an npm package that provides language server capabilities for the Astro framework. It enhances the development experience by offering features like code completion, diagnostics, and more within the context of Astro projects.

What are @astrojs/language-server's main functionalities?

Code Completion

This feature provides code completion suggestions for Astro files. The example shows a request for code completion at a specific position in an Astro file.

```json
{
  "textDocument/completion": {
    "textDocument": {
      "uri": "file:///path/to/your/astro/file.astro"
    },
    "position": {
      "line": 10,
      "character": 5
    }
  }
}
```

Diagnostics

This feature provides diagnostics information for Astro files, such as errors and warnings. The example shows a diagnostic message for an unexpected token in an Astro file.

```json
{
  "textDocument/publishDiagnostics": {
    "uri": "file:///path/to/your/astro/file.astro",
    "diagnostics": [
      {
        "range": {
          "start": { "line": 5, "character": 10 },
          "end": { "line": 5, "character": 15 }
        },
        "severity": 1,
        "code": "1001",
        "source": "astro",
        "message": "Unexpected token."
      }
    ]
  }
}
```

Hover Information

This feature provides hover information for symbols in Astro files. The example shows a request for hover information at a specific position in an Astro file.

```json
{
  "textDocument/hover": {
    "textDocument": {
      "uri": "file:///path/to/your/astro/file.astro"
    },
    "position": {
      "line": 8,
      "character": 12
    }
  }
}
```

Other packages similar to @astrojs/language-server

vscode-html-languageservice

The vscode-html-languageservice package provides language server capabilities for HTML. It offers features like code completion, hover information, and diagnostics for HTML files. Compared to @astrojs/language-server, it is more general-purpose and not specific to the Astro framework.

vscode-css-languageservice

The vscode-css-languageservice package provides language server capabilities for CSS. It includes features like code completion, hover information, and diagnostics for CSS files. While it focuses on CSS, @astrojs/language-server is tailored for the Astro framework, which may include CSS but also other types of content.

typescript-language-server

The typescript-language-server package provides language server capabilities for TypeScript. It offers features like code completion, hover information, and diagnostics for TypeScript files. While it is highly specialized for TypeScript, @astrojs/language-server is designed specifically for the Astro framework, which may include TypeScript but also other languages and frameworks.

README

@astrojs/language-server

The Astro language server, implement the language server protocol

Folder structure

├── bin             # .js file used to start the server
├── dist            # Compiled files, generated by TypeScript
├── src             # Source files
│   ├── core        # Core code such as .astro file parsing, configuration manager, document definition etc
│   └── plugins     # Modules for the different languages supported in .astro files
├── test            # Tests
└── types           # Types injected into Astro files by the language server under certain conditions

Troubleshooting

Formatting does not work

Using VS Code? This section does not apply to you, the VS Code extension includes both Prettier and the Astro plugin by default.

The Astro language server uses Prettier to format Astro files, but does not include prettier or prettier-plugin-astro by itself as dependencies in order to keep the dependency count low and allow users to better control the version of Prettier they want to use.

As such, if you want to use formatting, you'll need to install prettier and prettier-plugin-astro as dependencies in your project.